<template>
    <div>
        <div class="toolbar">
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchShop" placeholder="店铺名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="$store.dispatch('getShopList',{shopName:searchShop})">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="shopVisible=true">添加店铺</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table
                v-loading="$store.state.load"
                :data="$store.state.shop.shopList"
                style="width: 100%">
            <el-table-column
                    label="创建时间"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime |date }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="店铺名称"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.shopName}}
                </template>
            </el-table-column>
            <el-table-column
                    label="店铺类别"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.shopTypeName}}
                </template>
            </el-table-column>
            <el-table-column
                    label="店铺图片"
                    width="180">
                <template slot-scope="scope">
                    <img height="100px" :src="scope.row.shopPic |imgUrl" alt="">
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="$store.dispatch('deleteAdmin',scope.row._id)">添加店铺</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="$store.dispatch('deleteAdmin',scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pageInfo action-name="getShopList" :params="{shopTypeName:searchShopName}"></pageInfo>


        <el-dialog title="添加店铺" :visible.sync="shopVisible">
            <el-form>
                <el-form-item label="店铺名称:" label-width="120px">
                    <el-input v-model="shopForm.shopName" autocomplete="off" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="店铺类别:" label-width="120px">
                    <el-select v-model="shopForm.shopTypeId" placeholder="请选择">
                        <el-option
                                v-for="item in $store.state.shop.allShopTypeList"
                                :key="item._id"
                                :label="item.shopTypeName"
                                :value="item._id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="店铺图片:" label-width="120px">
                    <el-upload
                            :headers="{
                              authorization:$store.state.admin.token
                            }"
                            name="shopPic"
                            :data="shopForm"
                            ref="upload"
                            :limit="1"
                            :auto-upload="false"
                            :on-success="success"
                            class="upload-demo"
                            action="/api/shopList"
                            list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="shopVisible=false">取 消</el-button>
                <el-button type="primary" @click="$refs.upload.submit()">提 交</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "shopList",
        data(){
            return{
                shopVisible:false,
                shopForm:{
                    shopName:"",
                    shopTypeId:""
                },
                searchShop:""
            }
        },
        methods:{
            success(res){
                if(res.ok===1){
                    this.shopVisible=false
                    this.$store.dispatch("getShopList")
                    this.$message({
                        message:data.msg,
                        type: 'success'
                    });
                }else{
                    this.$message.error(res.msg)
                }
            }
        },
        mounted() {
            this.$store.dispatch("allShopTypeList")
        }
    }
</script>

<style scoped>

</style>